<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__STATIC__/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__STATIC__/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title></title>

</head>
<body onload="prettyPrint()">
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i>
    首页 <span class="c-gray en">&gt;</span>
    页面模板 <span class="c-gray en">&gt;</span>
    对话框 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a>
</nav>

<div class="Hui-article">
    <input id="scrollTop1" name="" type="hidden" value="0">
    <input id="scrollTop2" name="" type="hidden" value="0">
    <article class="cl pd-20">
        <h1 class="page_title">对话框 弹出层</h1>
        <div class="codeView docs-example">
            <button class="btn radius btn-primary size-L" onclick="modaldemo()">弹出对话框</button>
            <button class="btn radius btn-primary size-L ml-20" onclick="modalalertdemo()">消息框，2秒钟自动消失</button>
            <!----></div>
        <h3>HTML代码</h3>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn radius btn-primary size-L"</span><span class="pln"> </span><span class="atn">onClick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">modaldemo</span><span class="pun">()</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">弹出对话框</span><span class="tag">&lt;/button&gt;</span></li></ol></pre>
        <p>弹出层代码</p>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"modal-demo"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal fade"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">role</span><span class="pun">=</span><span class="atv">"dialog"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"myModalLabel"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">	</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">		</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content radius"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">			</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span></li><li class="L4"><span class="pln">				</span><span class="tag">&lt;h3</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-title"</span><span class="tag">&gt;</span><span class="pln">对话框标题</span><span class="tag">&lt;/h3&gt;</span></li><li class="L5"><span class="pln">				</span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"close"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"javascript:void();"</span><span class="tag">&gt;</span><span class="pln">×</span><span class="tag">&lt;/a&gt;</span></li><li class="L6"><span class="pln">			</span><span class="tag">&lt;/div&gt;</span></li><li class="L7"><span class="pln">			</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body"</span><span class="tag">&gt;</span></li><li class="L8"><span class="pln">				</span><span class="tag">&lt;p&gt;</span><span class="pln">对话框内容…</span><span class="tag">&lt;/p&gt;</span></li><li class="L9"><span class="pln">			</span><span class="tag">&lt;/div&gt;</span></li><li class="L0"><span class="pln">			</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-footer"</span><span class="tag">&gt;</span></li><li class="L1"><span class="pln">				</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary"</span><span class="tag">&gt;</span><span class="pln">确定</span><span class="tag">&lt;/button&gt;</span></li><li class="L2"><span class="pln">				</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn"</span><span class="pln"> </span><span class="atn">data-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">关闭</span><span class="tag">&lt;/button&gt;</span></li><li class="L3"><span class="pln">			</span><span class="tag">&lt;/div&gt;</span></li><li class="L4"><span class="pln">		</span><span class="tag">&lt;/div&gt;</span></li><li class="L5"><span class="pln">	</span><span class="tag">&lt;/div&gt;</span></li><li class="L6"><span class="tag">&lt;/div&gt;</span></li></ol></pre>
        <h3>CSS代码</h3>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="pun">.</span><span class="pln">fade </span><span class="pun">{</span><span class="pln">opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span></li><li class="L1"><span class="pln">	</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="pun">.</span><span class="lit">15s</span><span class="pln"> linear</span><span class="pun">;</span></li><li class="L2"><span class="pln">	</span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="pun">.</span><span class="lit">15s</span><span class="pln"> linear</span><span class="pun">;</span></li><li class="L3"><span class="pln">	transition</span><span class="pun">:</span><span class="pln"> opacity </span><span class="pun">.</span><span class="lit">15s</span><span class="pln"> linear</span><span class="pun">}</span></li><li class="L4"><span class="pun">.</span><span class="pln">fade</span><span class="pun">.</span><span class="kwd">in</span><span class="pln"> </span><span class="pun">{</span><span class="pln">opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">}</span></li><li class="L5"><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">open </span><span class="pun">{</span><span class="pln">overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">}</span></li><li class="L6"><span class="pun">.</span><span class="pln">modal</span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">1040</span><span class="pun">;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln">none</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln">hidden</span><span class="pun">;-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">overflow</span><span class="pun">-</span><span class="pln">scrolling</span><span class="pun">:</span><span class="pln">touch</span><span class="pun">;</span><span class="pln"> outline</span><span class="pun">:</span><span class="lit">0</span><span class="pun">}</span></li><li class="L7"><span class="pun">.</span><span class="pln">modal</span><span class="pun">.</span><span class="pln">fade </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">dialog</span><span class="pun">{</span></li><li class="L8"><span class="pln">	</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform </span><span class="pun">.</span><span class="lit">3s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span></li><li class="L9"><span class="pln">	</span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transition</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transform </span><span class="pun">.</span><span class="lit">3s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span></li><li class="L0"><span class="pln">	transition</span><span class="pun">:</span><span class="pln"> transform </span><span class="pun">.</span><span class="lit">3s</span><span class="pln"> ease</span><span class="pun">-</span><span class="kwd">out</span><span class="pun">;</span></li><li class="L1"><span class="pln">	</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,-</span><span class="lit">50</span><span class="pun">%);</span></li><li class="L2"><span class="pln">	</span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,-</span><span class="lit">50</span><span class="pun">%);</span></li><li class="L3"><span class="pln">	</span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,-</span><span class="lit">50</span><span class="pun">%);</span></li><li class="L4"><span class="pln">	transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,-</span><span class="lit">50</span><span class="pun">%)}</span></li><li class="L5"><span class="pun">.</span><span class="pln">modal</span><span class="pun">.</span><span class="kwd">in</span><span class="pln"> </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">dialog </span><span class="pun">{</span></li><li class="L6"><span class="pln">	</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span></li><li class="L7"><span class="pln">	</span><span class="pun">-</span><span class="pln">ms</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span></li><li class="L8"><span class="pln">	</span><span class="pun">-</span><span class="pln">o</span><span class="pun">-</span><span class="pln">transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span></li><li class="L9"><span class="pln">	transform</span><span class="pun">:</span><span class="pln"> translate</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)}</span></li><li class="L0"><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">open </span><span class="pun">.</span><span class="pln">modal </span><span class="pun">{</span><span class="pln">overflow</span><span class="pun">-</span><span class="pln">x</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln">overflow</span><span class="pun">-</span><span class="pln">y</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">}</span></li><li class="L1"><span class="pln">	</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">backdrop </span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#000}</span></li><li class="L2"><span class="pln">	</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">backdrop</span><span class="pun">.</span><span class="pln">fade </span><span class="pun">{</span><span class="pln">filter</span><span class="pun">:</span><span class="pln"> alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">0</span><span class="pun">);</span><span class="pln">opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">}</span></li><li class="L3"><span class="pln">	</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">backdrop</span><span class="pun">.</span><span class="kwd">in</span><span class="pln"> </span><span class="pun">{</span><span class="pln">filter</span><span class="pun">:</span><span class="pln"> alpha</span><span class="pun">(</span><span class="pln">opacity</span><span class="pun">=</span><span class="lit">50</span><span class="pun">);</span><span class="pln">opacity</span><span class="pun">:</span><span class="pln"> </span><span class="pun">.</span><span class="lit">5</span><span class="pun">}</span></li><li class="L4"><span class="pln">	</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">dialog </span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">}</span></li><li class="L5"><span class="pln">	</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">content</span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;border: 1px solid #999;border: 1px solid rgba(0,0,0,.2);outline: 0;</span></li><li class="L6"><span class="pln">		</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">background</span><span class="pun">-</span><span class="pln">clip</span><span class="pun">:</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span></li><li class="L7"><span class="pln">		background</span><span class="pun">-</span><span class="pln">clip</span><span class="pun">:</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span><span class="pln"> </span></li><li class="L8"><span class="pln">		</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="lit">9px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,.</span><span class="lit">5</span><span class="pun">);</span></li><li class="L9"><span class="pln">		box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="lit">9px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,.</span><span class="lit">5</span><span class="pun">)}</span></li><li class="L0"><span class="pln">	</span></li><li class="L1"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">header </span><span class="pun">{</span><span class="pln">min</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16.42857143px</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln">border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#eee; position:relative}</span></li><li class="L2"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">header </span><span class="pun">.</span><span class="pln">close</span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln">absolute</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="lit">10px</span><span class="pun">}</span></li><li class="L3"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">header h3</span><span class="pun">,.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">header </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">title</span><span class="pun">{</span><span class="pln">margin</span><span class="pun">:</span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="lit">10px</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">16px</span><span class="pun">}</span></li><li class="L4"><span class="pln">	</span></li><li class="L5"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">body </span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln">relative</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln">overflow</span><span class="pun">-</span><span class="pln">y</span><span class="pun">:</span><span class="pln">visible</span><span class="pun">;</span><span class="pln">word</span><span class="pun">-</span><span class="kwd">break</span><span class="pun">:</span><span class="kwd">break</span><span class="pun">-</span><span class="pln">all</span><span class="pun">}</span></li><li class="L6"><span class="pln">			</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">form </span><span class="pun">{</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">}</span></li><li class="L7"><span class="pln">	</span></li><li class="L8"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer </span><span class="pun">{</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f5f5f5;border-top: 1px solid #eee;*zoom: 1}</span></li><li class="L9"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer</span><span class="pun">:</span><span class="pln">before</span><span class="pun">,.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer</span><span class="pun">:</span><span class="pln">after </span><span class="pun">{</span><span class="pln">display</span><span class="pun">:</span><span class="pln"> table</span><span class="pun">;</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> </span><span class="str">""</span><span class="pun">}</span></li><li class="L0"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer</span><span class="pun">:</span><span class="pln">after </span><span class="pun">{</span><span class="pln">clear</span><span class="pun">:</span><span class="pln"> both</span><span class="pun">}</span></li><li class="L1"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer </span><span class="pun">.</span><span class="pln">btn </span><span class="pun">+</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn </span><span class="pun">{</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">}</span></li><li class="L2"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="kwd">group</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn </span><span class="pun">+</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn </span><span class="pun">{</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1px</span><span class="pun">}</span></li><li class="L3"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">block </span><span class="pun">+</span><span class="pln"> </span><span class="pun">.</span><span class="pln">btn</span><span class="pun">-</span><span class="pln">block </span><span class="pun">{</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">}</span></li><li class="L4"><span class="pln">		</span></li><li class="L5"><span class="pln">	</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">scrollbar</span><span class="pun">-</span><span class="pln">measure </span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">9999px</span><span class="pun">;</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">50px</span><span class="pun">;</span><span class="pln">overflow</span><span class="pun">:</span><span class="pln"> scroll</span><span class="pun">}</span></li><li class="L6"><span class="pln">	</span></li><li class="L7"><span class="pln">	</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">content</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">6px</span><span class="pun">}</span></li><li class="L8"><span class="pln">	</span><span class="pun">.</span><span class="pln">radius </span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">footer</span><span class="pun">{</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">-</span><span class="pln">left</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">6px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">-</span><span class="pln">right</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="lit">6px</span><span class="pun">}</span></li><li class="L9"><span class="pln">	</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">768px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></li><li class="L0"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">dialog </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">600px</span><span class="pun">;</span><span class="pln">margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30px</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">}</span></li><li class="L1"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">content </span><span class="pun">{-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="lit">5</span><span class="pun">);</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="lit">5</span><span class="pun">)}</span></li><li class="L2"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">sm </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">}</span></li><li class="L3"><span class="pln">	</span><span class="pun">}</span></li><li class="L4"><span class="pln">	</span><span class="lit">@media</span><span class="pln"> </span><span class="pun">(</span><span class="pln">min</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">992px</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></li><li class="L5"><span class="pln">		</span><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">lg </span><span class="pun">{</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">900px</span><span class="pun">}</span></li><li class="L6"><span class="pln">	</span><span class="pun">}</span></li><li class="L7"><span class="pln">&nbsp;</span></li><li class="L8"><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">alert</span><span class="pun">{</span><span class="pln">position</span><span class="pun">:</span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span><span class="lit">50</span><span class="pun">%;</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:-</span><span class="lit">150px</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="lit">50</span><span class="pun">%;</span><span class="pln">margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:-</span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="lit">9999</span><span class="pun">;</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;border: 1px solid #999;border: 1px solid rgba(0,0,0,.2);outline: 0;</span></li><li class="L9"><span class="pln">	</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">background</span><span class="pun">-</span><span class="pln">clip</span><span class="pun">:</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span></li><li class="L0"><span class="pln">	background</span><span class="pun">-</span><span class="pln">clip</span><span class="pun">:</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">box</span><span class="pun">;</span><span class="pln"> </span></li><li class="L1"><span class="pln">	</span><span class="pun">-</span><span class="pln">webkit</span><span class="pun">-</span><span class="pln">box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="lit">9px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,.</span><span class="lit">5</span><span class="pun">);</span></li><li class="L2"><span class="pln">	box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">3px</span><span class="pln"> </span><span class="lit">9px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,.</span><span class="lit">5</span><span class="pun">)}</span></li><li class="L3"><span class="pun">.</span><span class="pln">modal</span><span class="pun">-</span><span class="pln">alert</span><span class="pun">-</span><span class="pln">info</span><span class="pun">{</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln">center</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">14px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="com">#fff}</span></li><li class="L4"><span class="pln">			</span></li></ol></pre>
        <h3>JS代码</h3>
        <p>引入jquery.js 和 H-ui.js</p>
        <p>模态弹出窗默认支持的自定义属性主要有：</p>
        <table class="table table-border table-bg table-bordered">
            <thead>
            <tr>
                <th>属性</th>
                <th>类型</th>
                <th>默认值</th>
                <th>描述</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>backdrop</td>
                <td>布尔值</td>
                <td>true</td>
                <td>点击背景是否关闭模态框，true关闭，false不关闭</td>
                <td>等价于data-backdrop</td>
            </tr>
            <tr>
                <td>keyboard</td>
                <td>布尔值</td>
                <td>true</td>
                <td>按ESC是否关闭模态框，true关闭，false不关闭</td>
                <td>等价于data-keyboard</td>
            </tr>
            <tr>
                <td>show</td>
                <td>布尔值</td>
                <td>true</td>
                <td>初始化时弹出框是否显示</td>
                <td>等价于data-show</td>
            </tr>
            </tbody>
        </table>
        <h4>参数</h4>
        <table class="table table-border table-bg table-bordered">
            <thead>
            <tr>
                <th>参数</th>
                <th>使用方法</th>
                <th>描述</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>toggle</td>
                <td>$(“#mymodal”).modal(“toggle”)</td>
                <td>触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示</td>
            </tr>
            <tr>
                <td>show</td>
                <td>$(“#mymodal”).modal(“show”)</td>
                <td>触发时，显示模态弹出窗</td>
            </tr>
            <tr>
                <td>hide</td>
                <td>$(“#mymodal”).modal(“hide”)</td>
                <td>触发时，关闭模态弹出窗</td>
            </tr>
            </tbody>
        </table>
        <h4>事件设置</h4>
        <p>模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：</p>
        <table class="table table-border table-bg table-bordered">
            <thead>
            <tr>
                <th>事件类型</th>
                <th>描述</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>show.bs.modal</td>
                <td>在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性</td>
            </tr>
            <tr>
                <td>shown.bs.modal</td>
                <td>该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件</td>
            </tr>
            <tr>
                <td>hide.bs.modal</td>
                <td>在hide方法调用时（但还未关闭隐藏）立即触发</td>
            </tr>
            <tr>
                <td>hidden.bs.modal</td>
                <td>该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发</td>
            </tr>
            </tbody>
        </table>
        <p>调用方法也非常简单：</p>
        <pre class="prettyprint linenums"><ol class="linenums"><li class="L0"><span class="kwd">function</span><span class="pln"> modaldemo</span><span class="pun">(){</span></li><li class="L1"><span class="pln">	$</span><span class="pun">(</span><span class="str">"#modal-demo"</span><span class="pun">).</span><span class="pln">modal</span><span class="pun">(</span><span class="str">"show"</span><span class="pun">)}</span></li><li class="L2"><span class="kwd">function</span><span class="pln"> modalalertdemo</span><span class="pun">(){</span></li><li class="L3"><span class="pln">	$</span><span class="pun">.</span><span class="typ">Huimodalalert</span><span class="pun">(</span><span class="str">'我是消息框，2秒后我自动滚蛋！'</span><span class="pun">,</span><span class="lit">2000</span><span class="pun">)}</span></li></ol></pre>
        <!--高速版-->
        <div id="SOHUCS" sid=""></div>
        <!-- <script charset="utf-8" type="text/javascript" src="//changyan.sohu.com/upload/changyan.js" ></script>
        <script type="text/javascript">
            window.changyan.api.config({
                appid: 'cystmLO0N',
                conf: 'prod_06226f5d322c22bcd421cb90462fe2a2'
            });
        </script> -->

    </article>



</div>
<!--普通弹出层-->
<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content radius">
            <div class="modal-header">
                <h3 id="myModalLabel">对话框标题</h3>
                <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
            </div>
            <div class="modal-body">
                <p>对话框内容…</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">确定</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/prettify.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    $("#menu_4 dt").addClass("selected");$("#menu_4 dd").show();
    $(function(){
        $(".Hui-aside").scrollTop(320);
    });
    /*获取滚动条高度*/
    $(document).scroll(
        function(){
            var sTop=$(document).scrollTop();
            $("#scrollTop1").val(sTop)}
    );

    function modaldemo(){
        $("#modal-demo").modal("show")}
    function modalalertdemo(){
        $.Huimodalalert('我是消息框，2秒后我自动滚蛋！',2000);
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>